import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
            // This is the theme of your application.
            //
            // Try running your application with "flutter run". You'll see the
            // application has a blue toolbar. Then, without quitting the app, try
            // changing the primarySwatch below to Colors.green and then invoke
            // "hot reload" (press "r" in the console where you ran "flutter run",
            // or simply save your changes to "hot reload" in a Flutter IDE).
            // Notice that the counter didn't reset back to zero; the application
            // is not restarted.
            primarySwatch: Colors.blue,
            canvasColor: Colors.blue[100]),
        home: MyHomePage());
  }
}

// ignore: must_be_immutable
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  int currentPage = 0;
  int currenIndex = 0;
  AnimationController animationController;

  PageController _pageController;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _pageController =
        PageController(initialPage: 0, keepPage: true, viewportFraction: 0.7);
    animationController = new AnimationController(vsync: this,duration: Duration(milliseconds: 500));
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _pageController.dispose();
    animationController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: AnimatedBuilder(
            animation: _pageController,
            builder: (context,child){
              return child;
            },
            child: Column(
        children: <Widget>[
            Container(
              height: 500,
              child: PageView.builder(
                  controller: _pageController,
                  pageSnapping: true,
                  physics: ClampingScrollPhysics(),
                  itemCount: 6,
                  onPageChanged: _pageChange,
                  itemBuilder: (context, index) {
                    //print("$index : ${_pageController.page}");
                    return AnimatedBuilder(
                      animation: _pageController,
                      builder: (context, child) {
                        double value = 1;
                        if (index == 0) {
                          value = 0;
                        }
                        currenIndex = index;
                        if (_pageController.position.haveDimensions) {
                          //print("$index : ${_pageController.page}");
                          value = (_pageController.page - index)
                              .abs()
                              .clamp(0.0, 1.0);
                          //value = (1-(value.abs()*0.6)).clamp(0.0, 1.0);
                        }
                        return Container(
                          padding: EdgeInsets.only(
                              left: 5, right: 5, bottom: 200 * Curves.easeInCirc.transform(value)),
                            //left: 5, right: 5, bottom: 200 * value),
                          child: Container(
                              width: 100,
                              color: Colors.white,
                              padding: EdgeInsets.all(10),
                              child: Image.asset(images[index].imageUrl,
                                  fit: BoxFit.fitHeight)),
                        );
                      },
                    );
                  }),
            ),
            _showContent(currenIndex)
        ],
      ),
          )),
    );
  }
  Widget _showContent(index){

    return AnimatedBuilder(
      animation: _pageController,
      builder: (context,child){
        double value = 1;
        if (_pageController.position.haveDimensions) {

          value = (_pageController.page - index);
          value = (1-(value.abs()*3)).clamp(0.0, 1.0);
        }
        //print(_pageController.page);
        return Expanded(
          child: Transform.translate(
            offset: Offset(0, (Curves.bounceInOut.transform(value)*50-50)),
            child: Opacity(
              opacity: value,
              child: Padding(
                padding: const EdgeInsets.all(10.0),
                child:SingleChildScrollView(
                  child: Column(
                    children: <Widget>[
                      Text(images[index].title,style: TextStyle(fontSize: 30,fontWeight: FontWeight.w800,color: Colors.black),),
                      Text(images[index].description,style: TextStyle(fontSize: 15,fontWeight: FontWeight.w800,color:Colors.teal[200]),)
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      }
    );
  }

  _pageChange(index){
    setState(() {
      currenIndex = index;
    });
  }

}

const images = <ImageInfo>[
  ImageInfo(imageUrl: "images/timg.jpg",title: "标题",description: "这是一段描述信息"),
  ImageInfo(imageUrl: "images/timg01.jpg",title: "标题01",description: "中华文明一直秉持达己达人，崇尚和合包容，期盼和平大同。中国提出共同构建人类命运共同体，推动构建更具包容性的国际秩序框架，搭建能为大家遮风挡雨的共同屋顶，最大限度地容纳各方利益诉求和治理观念。习近平曾在不同场合倡议建立一个“包容的世界”，今天的《习近平时间》，我们一起来重温。"),
  ImageInfo(imageUrl: "images/timg02.jpg",title: "标题02",description: '''新华社日内瓦7月26日电（记者聂晓阳）记者从中国常驻日内瓦代表团获悉，截至当地时间26日晚，联名致函联合国人权理事会主席和人权高专对中国在涉疆问题上的立场表示支持的国家已增加到50个。还有一些国家的代表通过单独致函、发新闻稿等方式呼应和支持中方主张。

  　　中国常驻日内瓦代表团在26日发布的一份媒体声明中表示，这些联名致函的大使中有许多人访问过新疆，目睹了新疆的真实情况。这些大使在信函中积极评价中国经济社会发展成就及反恐、去极端化成果和人权保障水平，赞赏中方多次邀请各国使节、国际组织官员、媒体人士访疆。他们表示，访疆期间的所见所闻与西方媒体报道的完全不一样，部分国家应停止借未经证实的信息对中国进行无端指责。

  　　声明说，事实胜于雄辩，公道自在人心。联署此封信函的国家来自亚非拉欧等各地区，其中有很多是伊斯兰合作组织成员国。这充分表明，国际社会对新疆人权成就和反恐、去极端化成果自有公论，某些西方国家以“人权”为名抹黑中国、向中国施压的图谋不会得逞。

  　　声明说，中方致力于与各方一道，推动多边人权机构以客观、公正、非选择性方式处理人权问题。中国反对借人权问题干涉别国内政，敦促有关国家改弦更张，摈弃政治化和双重标准，停止借人权之名行干涉他国内政之实。

  　　刚果民主共和国驻日内瓦大使恩盖伊26日在接受记者采访时表示，他在中国新疆看到的是一个“秩序良好的地区”，中国政府在该地区打击恐怖主义的举措令人印象深刻。塔吉克斯坦驻日内瓦大使哈米多夫表示，作为中国的邻居，塔吉克斯坦对中国新疆的情况很了解，深知中国政府为保障该地区的和平、安全与发展所做的巨大努力。老挝常驻日内瓦大使基查德斯则表示，中国政府多年来为促进新疆经济社会发展做了大量工作，“我们在新疆看到的真实情况和这里（日内瓦）某些人士宣称的信息非常不同”。'''),
  ImageInfo(imageUrl: "images/timg03.jpg",title: "标题03",description: '''4月份以来，上海市有关部门委托第三方专业机构对全市居住区垃圾分类实效进行了测评，对各区及街道镇、乡、工业区）4至6月的分类情况综合排名。按照综合指数，崇明、长宁、徐汇、虹口和奉贤五区综合排名居前五位。街镇则按照综合指数分为优、良、中、差四个档次，共涉及220个街道镇、乡、工业区。其中评级为优的街镇有29个，占比13.2%；评级为差的街镇有68个，占比30.9%。这次实测根据居住区的达标标准，分为五项内容：有设施设备、有宣传告知两项为基础项目，在评分中占比45%；有物流去向、有长效管理、有分类实效三项为提质项目，在评分中占比55%。'''),
  ImageInfo(imageUrl: "images/timg04.jpg",title: "标题04",description: '''中国台湾网7月27日讯 据台湾《联合报》报道，私烟案延烧，前国民党“立委”丁守中今(27日)在脸谱网(facebook)发文指出，这次台当局私烟案定调是“超买”，而不是走私，听了真让人觉得匪夷所思。蔡英文你是学法律的吗？怎么讲出这种扭曲玩法的话。

丁守中表示，如此策划慎密、数量庞大的逃税私烟，通过不受监控的特权管道流进市场谋取私利，请问这不是走私？那什么是走私？如果只是简单的“超买”，还需要那么多偷天换日的蒙混动作干嘛？“超买”顶多罚钱了事，走私可是有刑责的。而蔡英文办公室特勤利用特权走私牟利，那衍生的问题则更加严重。

丁守中指出，出现这么严重的问题，蔡英文面对调查应该秉持公正客观的态度，为台湾民众做出表率，却硬要说成这是“超买”不是走私，难道蔡英文想蒙混世人？(中国台湾网 刘洪羊)'''),
  ImageInfo(imageUrl: "images/timg05.jpg",title: "标题05",description:'''北京的钟先生通过顺丰邮寄了一台价值98万元的医疗设备到南宁。他特意选择了2万元的保价，保价费100元。签收的时发现包装破损，外壳变形，如果修复，需要1万多元。钟先生本以为2万元的保价额度完全可以支付维修费用，钟先生提供了设备的发票以及维修的单据后，顺丰方面表示，可以赔，但只能赔250元。

钟先生的经历并非个案，南京市的姜女士此前通过顺丰快递将价值62.2万元的货物从内蒙古邮寄到南京，选择了20100元的保价，结果发生了意外损坏，维修价格是1.2万元，而顺丰的回复是赔偿389元。

江苏南通的施先生通过顺丰保价4000元寄给客户的电脑主机在快递途中受损，施先生主张的赔偿2200元却没有得到支持，顺丰只能赔800多元。''')
];

class ImageInfo{
  final String imageUrl;
  final String title;
  final String description;
  const ImageInfo({this.imageUrl, this.title, this.description});
}

/*

  "images/timg01.jpg",
  "images/timg02.jpg",
  "images/timg03.jpg",
  "images/timg04.jpg",
  "images/timg05.jpg",
 */
